<template>
    <div>
        <ul>
            <!-- 导航区域 -->
            <!-- 声明式导航:还是router-link -->
            <li v-for="(item, index) in goods" :key="item.id" @click="goDetail(item)">{{ item.title }}</li>
        </ul>
        <!-- 内容展示区域:三级路由组件内容 -->
        <router-view></router-view>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
//useRouter:vue-router提供的方法,可以获取到路由器对象
import { useRouter } from 'vue-router';
//获取到路由器对象
const router = useRouter();
const goods = ref([
    { id: 1, title: '烤鸭', price: 300 },
    { id: 2, title: '烤鹅', price: 8000 },
    { id: 3, title: '冰激凌', price: 6 }
]);
//点击事件回调
const goDetail = (item:any) => {
   router.push({
        path:'/home/message/detail',
        query:{
            price:item.price
        }
   });
}
</script>

<style scoped></style>